<template>
    <div class="some-panel hand">
      <div class="flex align-center" v-drag drag-min-top="10" size-area="100" style="height: 20px; background-color: #9cc3d8">
        <span class="font12 p-l-5 text-bold" style="color: #606f9e">便签</span>
      </div>
      <div class="content">
        <textarea/>
      </div>
    </div>
</template>
<style lang="scss" scoped>
.some-panel {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: #fffce7;
  border: 1px solid #9cc3d8;
  border-radius: 8px;
  overflow: hidden;
  width: 40px;
  height: 40px;
  //transition-property: width,height;
  //transition-delay:200ms;
  //transition-duration: 1s;
  //-webkit-transition-property: width,height; /* Safari */
  //-webkit-transition-duration: 1s; /* Safari */
}
.some-panel[dragged] {
  transition-property: width,height;
  transition-delay:200ms;
  transition-duration: 1s;
  -webkit-transition-property: width,height; /* Safari */
  -webkit-transition-duration: 1s; /* Safari */
  width: 200px;
  height: 200px;
}
.content{
  width: 100%;
  height: calc(100% - 20px);
  textarea{
    border: 0;
    outline:none;
    resize: none;
    background: transparent;
    overflow: scroll;
    width: 100%;
    height: 100%;
  }
}

</style>